<template>
	<view class="container">
<!-- 		<uni-search-bar placeholder="输入查找的人员" @confirm="search" :focus="false" v-model="searchValue" @blur="blur"
			@focus="focus" @input="input" @cancel="cancel" @clear="clear">
		</uni-search-bar> -->

		<view style="font-size: 20px;">

			<uni-collapse ref="collapse" accordion >
				<uni-collapse-item v-for="(item, index) in contactList" titleBorder="none" :show-animation="true" :border="false">
					<template v-slot:title >
							<view style="font-size: 14px;font-weight: bold;" >
								<uni-list-item :title="item.name"></uni-list-item>
							</view>
					</template>
					
					<!-- <view v-for="(item1, index1) in item.userList" class="user-bg">
						<image :src="tem1.avatar" style="height: 50px;width: 50px;"></image>
					</view> -->
					<uni-list :border="false">
						<uni-list-chat  v-for="(item1, index1) in item.userList" 
							clickable
							avatarCircle
							:title="item1.name"
							:avatar="item1.avatar" 
							:note="'电话：'+item1.phone" 
							:time="item1.positionName"
							@click="clickContactItem(item1.name, item1.departmentName, item1.positionName, item1.phone)"  />
					</uni-list>
					
						

				</uni-collapse-item>

			</uni-collapse>
		</view>

	</view>
</template>

<script>
	import {websock} from '../../net/websock'
	export default {
		data() {
			return {
				contactList: []
			}
		},
		async onReady() {
			try {
				this.contactList = await websock.getContactList()
				console.log('contact list on ready', this.contactList)
			} catch (e) {
				uni.showToast({title: e.message})
			}
		},
		onLoad() {
			uni.$on('refresh_contact', this.refresh_contact)
		},
		onUnload() {
			uni.$off('refresh_contact', this.refresh_contact)
		},
		methods: {
			change(id) {
				console.log('contact list change id', id)
			},
			clickContactItem(name, departmentName, positionName, phone) {
				console.log('click contact item', name, departmentName, positionName, phone)
				uni.navigateTo({
					url: `/pages/contact/contactDetail?name=${name}&departmentName=${departmentName}&positionName=${positionName}&phone=${phone}`
				})
			},
			async refresh_contact() {
				try {
					this.contactList = await websock.getContactList()
					console.log('contact list on ready', this.contactList)
				} catch (e) {
					uni.showToast({title: e.message})
				}
			}
		}
	}
</script>

<style>
	.container {
		font-size: 14px;
		line-height: 24px;
		background-image: url(../static/login/bg.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
</style>
